<template>
    <div class="page-wrapper">
        <div class="page-wrapper__body is-list">
            <div class="page-container">
                <div class="grid-container">
                    <el-row :gutter="20" class="grid-table-tool">
                        <el-col :span="4" class="tool-action">
                            <el-input v-model="params.key" placeholder="姓名/手机号码" @keyup.enter="onSearch">
                            </el-input>
                        </el-col>
                        <el-col :span="4" class="tool-action">
                            <el-input v-model="params.school" placeholder="院校名称" @keyup.enter="onSearch">
                            </el-input>
                        </el-col>
                        <el-col :span="4" class="tool-action">
                            <el-input v-model="params.major" placeholder="专业" @keyup.enter="onSearch">
                            </el-input>
                        </el-col>
                        <el-col :span="4" class="tool-action">
                            <el-input v-model="params.education" placeholder="学历" @keyup.enter="onSearch">
                            </el-input>
                        </el-col>
                        <el-col :span="4">
                            <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
                        </el-col>
                    </el-row>
                    <el-table :data="studentList" border class="grid-table" width="100%" v-loading="isLoading">
                        <el-table-column type="index" align="center"> </el-table-column>
                        <el-table-column prop="name" label="姓名" ></el-table-column>
                        <el-table-column prop="sex" label="性别" ></el-table-column>
                        <el-table-column prop="tel" label="电话" ></el-table-column>
                        <el-table-column prop="mail" label="邮件" ></el-table-column>
                        <el-table-column prop="school" label="院校" ></el-table-column>
                        <el-table-column prop="major" label="专业" ></el-table-column>
                        <el-table-column prop="study" label="研究方向" ></el-table-column>
                        <el-table-column prop="education" label="学历" ></el-table-column>
                        <el-table-column prop="graduate" label="毕业时间" ></el-table-column>
                        <el-table-column prop="city" label="所在城市" ></el-table-column>
                    </el-table>
                    <el-row class="grid-table-tool">
                        <el-col :span="12" class="tool-action">&nbsp;</el-col>
                        <el-col :span="12" class="tool-pagination">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                @prev-click="handPrevChange"
                                @next-click="handNextChange"
                                :current-page="params.page"
                                :page-size="params.pageSize"
                                layout="total, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    import {findList} from '../../api/student'

    export default {
        name: "list",
        data() {
            return{
                isLoading: false,
                studentList:[],
                params:{
                    key: '',
                    school: '',
                    major: '',
                    education: '',
                    sort: '',
                    order: '',
                    page: 1,
                    pageSize: 50,
                },
                total:0,
            }
        },
        methods: {
            onSearch(){
                this.params.page = 1;
                this.loadData();
            },
            handPrevChange(val){
                this.params.page = val-1;
                this.loadData();
            },
            handNextChange(val){
                this.params.page = val+1;
                this.loadData();
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.params.page = val;
                this.loadData()
            },
            async loadData(){
                this.isLoading = true;
                //console.log(this.params);
                let resp = await findList(this.params);
                if(!this.qUtil.validResp(resp)){
                    this.$message({type: 'error', message: '数据加载失败!', showClose: true});
                    return false;
                }
                this.studentList = resp.data.dataList;
                this.total = resp.data.total;
                this.isLoading = false;
            }
        },
        mounted(){
            this.loadData()
        }
    }
</script>

<style scoped>

</style>